<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">后台管理系统</el-header>
      <el-container>
        <el-aside class="aside">
          <el-menu :unique-opened="true" router>
              <el-menu-item index="/backmanagement">
              <span>首页</span>
              </el-menu-item>
              <el-sub-menu index="2">
                  <template #title>
                      <span>非遗项目</span>
                  </template>
                  <el-menu-item index="/backmanagement/opera">戏曲</el-menu-item>
                  <el-menu-item index="/backmanagement/handicraft">手工艺</el-menu-item>
                  <el-menu-item index="/backmanagement/music">音乐</el-menu-item>
                  <el-menu-item index="/backmanagement/dance">舞蹈</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="3">
                  <template #title>
                      <span>传承人</span>
                  </template>
                  <el-menu-item index="/backmanagement/artist">传承人介绍</el-menu-item>
                  <el-menu-item index="/backmanagement/statistics">统计分析</el-menu-item>
              </el-sub-menu>
              <el-menu-item index="4" >
              <span>用户管理</span>
              </el-menu-item>
              <el-menu-item index="5">
              <span>系统日志</span>
              </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="main">
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>

</script>

<style scoped>
  .header{
      width: 100vw;
      height: 10vh;
      background-color: rgb(235,241,246);
      line-height: 10vh;
      color: rgb(101,102,100);
      font-size: 1.5rem;
  }
  .aside{
      background-color: rgb(235,241,246);
      width: 15vw;
      height: 100vh;
  }
  :deep(.el-menu) {
      background-color: rgb(235,241,246);
  }
  .el-menu-item{
    margin:0 20%;
  }
   .el-sub-menu{
    margin:0 20%;
  }
</style>